<template>
  <div>
    <myheader></myheader>

	<section class="cart text-center">
		<div class="container">
			<!-- <div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> 继续购物</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">付款通道</a></div>
			</div> -->
			<div class="row">
				<div class="col-12 text-center">
					<h2 class="mt-5 mb-2">{{$t('m.shopping_cart')}}</h2>
					<!-- <p class="mb-5"><span class="primary-color">3</span> Items in your cart</p> -->
					<table id="cart" class="table table-condensed" >
						<thead>
							<tr>
								<th style="width:60%">{{$t('m.shopping_name')}}</th>
								<th style="width:12%">{{$t('m.shopping_price')}}</th>
								<th style="width:10%">{{$t('m.shopping_num')}}</th>
								<th style="width:16%"></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for='(item, index) in cartlist'>
								<td data-th="Product">
									<div class="row">
										<div class="col-md-3 text-left">
											<img :src="'http://q8g3tkq9d.bkt.clouddn.com/' + item.img" alt="" class="img-fluid">
										</div>
										<div class="col-md-9 text-left mt-sm-2">
											<h4>{{ item.name }}</h4>
											<!-- <p>York &amp; Smith</p> -->
										</div>
									</div>
								</td>
								<td data-th="Price">${{ item.price }}</td>
								<td data-th="Quantity">
									<input type="number" class="form-control text-center" v-model="item.num" @change="input_num(index)">
								</td>
								<td class="actions" data-th="">
									<div class="text-right">
										<button @click="changenum(index, '-')" class="btn btn-white btn-md mb-2"><i class="fas fa-sync"></i>-</button>
										<button @click="changenum(index, '+')" class="btn btn-white btn-md mb-2"><i class="fas fa-trash"></i>+</button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="float-right text-right">
						<h4>{{$t('m.gross')}}:</h4>
						<h1>${{ total_cart()['price']}}</h1>
						<p>({{$t('m.commodity_details')}})</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i>{{$t('m.continue_shopping')}}</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">{{$t('m.pay')}}</a></div>
			</div>
		</div>
	</section>
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>	
    
  </div>
  
</template>


 
<script>
import myheader from "./myheader";

export default {

  data () {
    return {
      msg: "这是一个变量",
	  cartlist: []
    }
  },
  components: {
    'myheader': myheader,
  },
  mounted:function(){
	  this.init_cartlist()


},
  methods:{
	// 总价总数
    total_cart:function(){
        var total = 0;
        var price = 0;
        for (let i=0, l = this.cartlist.length; i<l;i++){
          total += this.cartlist[i].num
          price += (this.cartlist[i].num * this.cartlist[i].price)
        }
        return {total:total, price:price}
      },
	// 删除整行逻辑
	delete_one:function(index){
		this.cartlist.splice(index, 1);
	},
	// 判断数量是否变为0
	input_num:function(index){
		if (this.cartlist[index].num == 0){
			this.delete_one(index);
		}
		localStorage.setItem('cart', JSON.stringify(this.cartlist))
	},
	// 商品的增加或者减少
	changenum:function(index, type){
		// 累加操作
		if (type == '+'){
			this.cartlist[index].num++;
		}else{
		// 减少操作
			if (this.cartlist[index].num > 1){
				this.cartlist[index].num--;
			}else{
				this.delete_one(index);
			}
		}
		// 状态续存
		localStorage.setItem('cart', JSON.stringify(this.cartlist))
	},
	// 初始化购物车
	init_cartlist:function(){
        var cart = localStorage.getItem('cart')
        if (cart){
          this.cartlist = JSON.parse(cart)
        }
      },
  }
}


</script>
 
<style>



</style>